<template>
  <view>
    <view class="person-head">
      <cmd-avatar :src="headUrl" @click="fnInfoWin" size="lg" :make="{'background-color': '#fff'}"></cmd-avatar>
      <view class="person-head-box" v-if="isLogin == 'yes'">
        <view class="person-head-nickname">{{userName}}</view>
      </view>
	  <view class="person-head-box" v-else-if="isLogin == 'no'">
	    <view class="person-head-nickname">
			<u-button type="success" text="登录" shape="cricle" @click="login()"></u-button>
		</view>
	  </view>	
    </view>
    <view class="person-list">

      <cmd-cell-item title="反馈" slot-left arrow @click="getFeedback()">
        <cmd-icon type="message" size="24" color="#368dff"></cmd-icon>
      </cmd-cell-item>

      <cmd-cell-item title="关于我们" slot-left arrow @click="getAbout()">
        <cmd-icon type="alert-circle" size="24" color="#368dff"></cmd-icon>
      </cmd-cell-item>
    </view>
  </view>
</template>

<script>
  import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
  import cmdIcon from "@/components/cmd-icon/cmd-icon.vue"
  import cmdCellItem from "@/components/cmd-cell-item/cmd-cell-item.vue"

  export default {
    components: {
      cmdAvatar,
      cmdCellItem,
      cmdIcon
    },
    data() {
      return {
		  headUrl: uni.getStorageSync('headUrl'),
		  userId: uni.getStorageSync('userId'),
		  userName: uni.getStorageSync('userName'),
		  isLogin: uni.getStorageSync('isLogin')
	  };
    },
	onPullDownRefresh() {
		this.headUrl = uni.getStorageSync('headUrl')
		this.userName = uni.getStorageSync('userName')
		uni.stopPullDownRefresh()
	},
    methods: {
      /**
       * 打开用户信息页
       */
      fnInfoWin() {
        uni.navigateTo({
          url: '/pages/user/info/info'
        })
      },
	  async login() {
		  const _this = this
		  uni.showModal({
		  	mask: true,
			title: '温馨提示',
			content: '授权微信登录后才能正常使用小程序功能',
			success(res) {
				if(res.confirm == true){
					uni.login({
						provider: 'weixin',
						success:function (loginRes) {
							let params = {
								"code": loginRes.code
							}
							if(loginRes.errMsg == 'login:ok') {
								uni.request({
									header: {
										  'Content-Type': 'application/x-www-form-urlencoded'
									   },
									url: _this.$USER_AVATOR_URL.USER_AVATOR_URL+"/login",
									method: 'POST',
									data: params,
									success(res) {
										if(res.data.code == 200){
											uni.setStorageSync("userId", res.data.data.userId)
											uni.setStorageSync("token", res.data.data.token)
											uni.setStorageSync("userName", res.data.data.userName)
											uni.setStorageSync("headUrl", res.data.data.headUrl)
											uni.setStorageSync("isLogin", 'yes')
											_this.userId = uni.getStorageSync('userId')
											_this.userName = uni.getStorageSync('userName')
											_this.isLogin = uni.getStorageSync('isLogin')
										}
									}
								})
							}
						}
					})
				}
			}
		  })
	  },
	  getFeedback() {
		  uni.navigateTo({
		  	url: '/pages/user/feedback/feedback'
		  })
	  },
	  getAbout() {
		  uni.navigateTo({
		  	url: '/pages/user/about/about'
		  })
	  }
    }
  }
</script>

<style>
  .person-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 150px;
    padding-left: 20px;
    background: linear-gradient(to right, #365fff, #36bbff);
  }

  .person-head-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;
  }

  .person-head-nickname {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }

  .person-head-username {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }

  .person-list {
    line-height: 0;
  }
</style>
